import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Controls.Styles 1.2



//Item {
//    width: 300; height: 300

//    Rectangle {
//        id: rect
//        width: 150; height: 100; anchors.centerIn: parent
//        color: "red"
//        antialiasing: true

//        states: State {
//            name: "rotated"
//            PropertyChanges { target: rect; rotation: 180 }
//        }

//        transitions: Transition {
//            RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
//        }
//    }

//    MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }
//}

Rectangle {
    width: 350
    height: 250

    Rectangle {
        id: rectLogin
        objectName: "rectLogin"
        color: "#08BEE3"
        anchors.fill: parent

        ColumnLayout {
            spacing: 20
             Layout.alignment: Qt.AlignHCenter
             anchors.fill: parent

             Rectangle  {
                 id: rectMsg
                 Layout.fillWidth: true
                 color: "blue"
                 height: msg1.height
                 visible: false

                 Text {
                     id: msg1
                     text: "adsfasd"
                     color:  "red"
                     elide: Text.ElideLeft
                     //visible: false
                     Layout.fillWidth: true
                     //Layout.alignment: Qt.AlignHCenter
                 }

                 PropertyAnimation {
                     id: animateShowMsg;
                     target: rectMsg;
                     properties: "y";
                     from: -msg1.height
                     to: 0
                     duration: 100
                 }
                 PropertyAnimation {
                     id: animateHideMsg;
                     target: rectMsg;
                     properties: "y";
                     from: 0
                     to: -msg1.height
                     duration: 100

                     onStopped:  {
                         rectMsg.visible = false
                     }
                 }
             }

             Rectangle {
                 //color: "red"
                 opacity : 0
                 Layout.fillWidth: true
                 height: 10
             }

            GridLayout {
                id: grid
                columns: 3
                rowSpacing: 0
                Layout.alignment: Qt.AlignHCenter

                Text { text: "  账号：" }
                TextField {
                    id: accountEdit
                    objectName: "accountEdit"
                    placeholderText: "账号"
                    style: TextFieldStyle {
                        background: Image {
                            source: accountEdit.focus? "qrc:///Resource/edit_frame_down_reversed.png" : (accountEdit.hovered? "qrc:///Resource/edit_frame_hover_reversed.png" : "qrc:///Resource/edit_frame_normal_reversed.png")
                        }
                        padding.left: 8
                        padding.right: 8
                    }
                    function callbyc(arg1)
                    {
                        text = arg1
                        return arg1;
                    }
                }
                Text { text: "注册"; font.underline: true }
                Text { text: "  密码：" }
                TextField {
                    id: passwordEdit
                    objectName: "passwordEdit"
                    echoMode: TextInput.Password;
                    placeholderText: "密码"
                    style: TextFieldStyle {
                        background: Image {
                            source: passwordEdit.focus? "qrc:///Resource/edit_frame_down.png" : (passwordEdit.hovered? "qrc:///Resource/edit_frame_hover.png" : "qrc:///Resource/edit_frame_normal.png")
                        }
                        padding.left: 8
                        padding.right: 8
                    }
                }
                Text { text: "忘记密码"; font.underline: true }
            }

            Button {
                id: login
                objectName: "login"
                Layout.alignment: Qt.AlignHCenter
                text: "登录"
                style: ButtonStyle {
                    background: Image {
                        //source: "qrc:///Resource/button_login_normal.png"
                        source: login.pressed? "qrc:///Resource/button_login_down.png" : (login.hovered? "qrc:///Resource/button_login_hover.png" : "qrc:///Resource/button_login_normal.png")
                    }
                }

                function showMessageBox(msg) {
                    timer.stop();
                    msg1.text = msg
                    //msg1.visible = true
                    rectMsg.visible = true
                    //mouseArea.anchors.fill = parent;
                    timer.start();
                    animateShowMsg.start();
                }
            }

            Rectangle {
                //color: "blue"
                opacity : 0
                Layout.fillWidth: true
                Layout.fillHeight: true
            }

            Timer {
                id: timer
                interval: 5000; running: false
                onTriggered: {
                    //mouseArea.anchors.fill = msg1
                    animateHideMsg.start();
                }
            }

    //        MouseArea {
    //            id: mouseArea
    //            anchors.fill: msg1
    //            onClicked: {
    //                msg1.visible = false
    //                anchors.fill = msg1
    //            }
    //        }
        }
    }

    Test_Stack {
        visible:  false
    }
}

/*
ColumnLayout {
    spacing: 20
    //maximumHeight: 100
    Vector3dAnimation {
        id: d3Animation
        target: login;
        from: 10
        to: 100
        duration: 5000
    }

    PropertyAnimation {
        id: animateColor;
        target: rect1;
        properties: "color";
        from: "white"
        to: "black";
        duration: 5000

        onStopped: {
            animateColor2.start()
        }
    }
    PropertyAnimation {
        id: animateColor2;
        target: rect2;
        properties: "color";
        from: "green"
        to: "red";
        duration: 5000

        onStopped: {
            animateColor.start()
        }
    }
    MouseArea {
             anchors.fill: parent
             onClicked: {
                 animateColor.start()
                 d3Animation.start()
                 //animateOpacity.start()
             }
         }



//        NumberAnimation {
//            id: animateOpacity
//            target: flashingblob
//            properties: "opacity"
//            from: 0.99
//            to: 1.0
//            loops: Animation.Infinite
//            easing {type: Easing.OutBack; overshoot: 500}
//       }

    Rectangle {
        id: rect1
        Layout.fillWidth: true
        Layout.fillHeight: true
        //Layout.minimumWidth: 430
        Layout.maximumHeight: 50
        //color: "#08BEE3"
        //color: backgroundColor
        anchors.fill: parent
    }

    GridLayout {
        id: grid
        columns: 3
        rowSpacing: 0
        Layout.alignment: Qt.AlignHCenter

//         Text { visible: false }
//        Text {
//            id: msg1
//            text: "adsfasd"
//            visible: false
//            color:  "red"
//            Layout.alignment: Qt.AlignHCenter
//        }
//        Text { visible: false }

        Text { text: "  账号：" }
        TextField {
            id: accountEdit
            objectName: "accountEdit"
            placeholderText: "账号"
            //Layout.preferredWidth: 194
            //Layout.preferredHeight: 30
            style: TextFieldStyle {
                background: Image {
                    source: accountEdit.focus? "Resource/edit_frame_down_reversed.png" : (accountEdit.hovered? "Resource/edit_frame_hover_reversed.png" : "Resource/edit_frame_normal_reversed.png")
                }
                padding.left: 8
                padding.right: 8
            }
            function callbyc(arg1)
            {
                text = arg1
                return arg1;
            }
        }
        Text { text: "注册"; font.underline: true }
        Text { text: "  密码：" }
        TextField {
            id: passwordEdit
            objectName: "passwordEdit"
            echoMode: TextInput.Password;
            placeholderText: "密码"
            //Layout.preferredWidth: 194
            //Layout.preferredHeight: 30
            style: TextFieldStyle {
                background: Image {
                    source: passwordEdit.focus? "Resource/edit_frame_down.png" : (passwordEdit.hovered? "Resource/edit_frame_hover.png" : "Resource/edit_frame_normal.png")
                }
                padding.left: 8
                padding.right: 8
            }
        }
        Text { text: "忘记密码"; font.underline: true }
    }
    RowLayout {
        Layout.alignment: Qt.AlignHCenter

        Button {
            id: login
            objectName: "login"
            text: "登录"
            //Layout.minimumWidth: 10
            //Layout.minimumHeight: 10
            //Layout.preferredWidth: 194
            //Layout.preferredHeight: 30
            style: ButtonStyle {
                background: Image {
                    //source: "qrc://Resource/button_login_normal.png"
                    source: login.pressed? "Resource/button_login_down.png" : (login.hovered? "Resource/button_login_hover.png" : "Resource/button_login_normal.png")
                }
            }
            MessageDialog {
                id: messageDialog
                objectName: "messageDialog"
                icon: StandardIcon.Warning
                standardButtons: StandardButton.Ok
                title: "May I have your attention please"
                text: "It's so cool that you are using Qt Quick."
                onYes: {
                }
            }
            function showMessageBox(msg) {
                //messageDialog.text = msg
                //messageDialog.visible = true;
                //messageDialog.open();
                msg1.text = msg
                msg1.visible = true
            }

//            states: State {
//                name: "rotated"
//                PropertyChanges { target: login; rotation: 180 }
//            }

//            transitions: Transition {
//                RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
//            }

            SequentialAnimation {
                id: parallelAnimation
                running: false
                loops: 10
                ParallelAnimation {
                    NumberAnimation { target: login; property: "x"; to: login.x-5; duration: 20 }
                    NumberAnimation { target: login; property: "y"; to: login.y-5; duration: 20 }
                }
                ParallelAnimation {
                    NumberAnimation { target: login; property: "x"; to: login.x+5; duration: 20 }
                }
                ParallelAnimation {
                    NumberAnimation { target: login; property: "x"; to: login.x-5; duration: 20 }
                    NumberAnimation { target: login; property: "y"; to: login.y+5; duration: 20 }
                }
                ParallelAnimation {
                    NumberAnimation { target: login; property: "y"; to: login.y-5; duration: 20 }
                }

                ParallelAnimation {
                    NumberAnimation { target: login; property: "x"; to: login.x; duration: 20 }
                    NumberAnimation { target: login; property: "y"; to: login.y; duration: 20 }
                }

            }

            onClicked: {
                //login.state = "rotated";
                parallelAnimation.start()
            }
//            onClicked: {
//                //property v: accountEdit.text + "\r\n" + passwordEdit.text
//                var msg = accountEdit.text + "\r\n" + passwordEdit.text
//                messageDialog.text = msg
//                //messageDialog.visible = true;
//                messageDialog.open();
//            }
        }
    }
    Rectangle {
        id: rect2
        Layout.fillWidth: true
        Layout.fillHeight: true
        //Layout.minimumWidth: 240
        //Layout.minimumHeight: 30
        color: "#08BEE3"
    }
}*/
